<template>
  <div class="home">
    <div class="container">
  
      <Sidebar></Sidebar>
  
      <!--Start Main-->
      <div class="m-main">
  
        <!--<Ground></Ground>-->
        <!--<PostForm></PostForm>-->
        <!--<UserList></UserList>-->
        <!--<Settings></Settings>-->
        <!--<PostDetail></PostDetail>-->
        <router-view></router-view>
        <mu-circular-progress :size="60" :strokeWidth="5" v-if="isLoading" />
  
        <Snackbar></Snackbar>
      </div>
      <!--END Main-->
    </div>
  
  </div>
</template>

<script>
import Sidebar from "../components/Sidebar.vue"
import Ground from "../components/Ground.vue"
import Chatroom from "../components/Chatroom.vue"
import PostForm from "../components/PostForm.vue"
import UserList from "../components/UserList.vue"
import Settings from "../components/Settings.vue"
import PostDetail from "../components/PostDetail.vue"
import Snackbar from "../components/Snackbar.vue"


export default {
  name: 'home',
  data() {
    return {

    }
  },
  computed: {
    isLoading() {
      return this.$store.state.isSpiner
    },
  },
  components: {
    Sidebar,
    Ground,
    PostForm,
    UserList,
    Settings,
    PostDetail,
    Chatroom,
    Snackbar
  },
  methods:{
   
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
.home {
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  width: 100%;
  min-height: 100%;
  background: url('../assets/images/login_bg.jpg') no-repeat center center;

  background-size: cover;
}

.container {
  width: 100%;
  height: 100%;
}

// main
.m-main {
  position: relative;
  margin-left: 300px;
  min-height: 95vh;
  background-color: #f1f4ff;
  background-attachment: fixed;
  padding: 60px 0;
  &-full {
    left: 100px;
  }
}

.m-snackbar {
  z-index: 999999999;
}

.mu-circular-progress {
  left: 50%;
  margin-top: 30px;
  margin-left: -30px;
}
</style>
